<template>
  <div>
    <d2-crud
      ref="d2Crud"
      index-row
      selection-row
      :loading="loading"
      :columns="columns"
      :data="data"
      :options="options"
      :rowHandle="rowHandle"
      @selection-change="selectChange"
      @row-click="rowClick"
      @show-detail="showMenus"
      @mod-model="mod"
      @del-model="del"
      :pagination="pagination"
      @pagination-current-change="paginationCurrentChange"
      style="height: calc(100% - 55px);">
      <div class="title" slot="header">
        <span class="text">角色列表</span>
        <list-search :cols="columns" @search="searchParamChange"/>
        <head-btns @load="pageBtns" @add="add" @mod="mod" @del="del"/>
      </div>
    </d2-crud>
    <detail-info ref="detailFrom" v-model="isShowDetail" @submit="getTableData"/>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  import utils from '@/assets/utils/zhzf-util';
  import roleApi from "@/api/system/role";
  import detailInfo from "./detail-info";
  import HeadBtns from "@/views/comps/zhzf/head-btns";
  import ListSearch from "../../comps/zhzf/list-search";

  export default {
    name: "RolePage",
    components: {ListSearch, detailInfo, HeadBtns},
    computed: {
      ...mapState('d2admin/user', [
        'info'
      ])
    },
    data() {
      return {
        columns: [
          // {title: '角色标识', key: 'roleKey', width: '180'},
          {title: '角色名称', key: 'roleName', width: '180'},
          // {title: '角色类型', key: 'roleType'},
          {title: '备注', key: 'remark'}],
        data: [],
        options: {
          stripe: true,
          highlightCurrentRow: true
        },
        pagination: {
          currentPage: 1,
          pageSize: 15,
          total: 0
        },
        rowHandle: {},
        isShowDetail: false,
        selected: [],
        loading: false,
        query: {},
      };
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      async searchParamChange(query) {
        this.query = query;
        await this.getTableData();
      },
      async paginationCurrentChange(currentPage) {
        this.pagination.currentPage = currentPage;
        await this.getTableData()
      },
      async getTableData() {
        let res = await roleApi.rolePage({...this.query, ...this.pagination});
        this.data = res.data.rows;
        this.pagination.total = res.data.total || this.data.length;
      },
      pageBtns(btns) {
        btns = btns || [];
        this.rowHandle = {
          width: 150, custom: []
        };
        btns.forEach(item => {
          if (item.url == 'add') {
            return false;
          }
          this.rowHandle.custom.push({
            title: item.name,
            size: 'mini',
            emit: `${item.url}-model`,
            icon: item.icon,
            style: `color:${item.url == 'del' ? '#f53c1b' : '#1B98F5'}`
          });
        })
        //添加非权限操作按钮
        this.rowHandle.custom.push({title: '权限', size: 'mini', emit: 'show-detail', icon: "fa fa-share-alt", style: "color:#027be3;"});
      },
      rowClick(row) {
        let els = this.$refs.d2Crud.$children;
        this.$refs.d2Crud.$children[els.length == 1 ? 0 : els.length - 2].toggleRowSelection(row);
      },
      selectChange(selection) {
        this.selected = selection;
      },
      showDetail(row, readonly) {
        //需要扩展判断用户管理的角色，包含用户管理的角色不可操作
        if (row && row.id == '1' && !readonly) {
          utils.showTips('不能操作当前用户管理的角色信息', false);
          return;
        }
        this.isShowDetail = true;
        this.$refs.detailFrom.initPage(row, readonly);
      },
      showMenus(rd) {
        this.showDetail(rd.row, true)
      },
      add() {
        this.showDetail();
      },
      mod(rd) {
        //判断有没有选择数据
        if (rd && rd.row) {
          this.showDetail(rd.row);
        } else if (this.selected.length == 1) {
          this.showDetail(this.selected[0]);
        } else {
          utils.showTips('请选择一行数据', false);
          return;
        }
      },

      del(row) {
        if (!row && !this.selected.length) {
          utils.showTips('请选择要删除的数据', false);
          return;
        }
        let delIds = [];
        if (row) {
          delIds = [row.row.id];
        } else {
          this.selected.map(item => {
            delIds.push(item.id)
          });
        }
        //需要扩展判断用户管理的角色，包含用户管理的角色不可删除
        let flag = delIds.some(item => item == '1');
        if (flag) {
          utils.showTips('不能刪除系統管理角色', false);
          return;
        }
        this.$confirm("确认删除？", "确认信息", {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消"
        }).then(async () => {
          let res = await roleApi.delRole(delIds);
          await this.getTableData();
        });
      }
    }
  };
</script>
